<template>
  <div class="form-single-fragment" style="position: relative">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      size="mini"
      label-position="right"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务名称" prop="task">
            <el-input
              class="input-item"
              v-model="ruleForm.task"
              placeholder="请输入"
              maxlength="20"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务说明" prop="planDescription">
            <el-input
              class="input-item"
              v-model="ruleForm.planDescription"
              placeholder="请输入"
              maxlength="20"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="执行人" prop="executor">
            <el-select
              ref="selectExecutor"
              multiple
              style="display: block"
              v-model="ruleForm.executor"
              placeholder="请选择"
              @change="selectExecutor"
            >
              <el-option
                v-for="item in projectUserDtoList"
                :key="item.userId"
                :label="item.showName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否需要盖章" prop="sealIsNo">
            <el-select v-model="ruleForm.sealIsNo" placeholder="请选择">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="this.ruleForm.TaskType === 'add'">
          <el-form-item label="是否审核" prop="examine">
            <el-radio-group
              v-model="ruleForm.examine"
              @change="selectExamine"
            >
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="this.ruleForm.examine === 1">
        <el-col :span="24">
          <el-form-item label="审批流：">
            <approver1 :approverList="ruleForm.approver" :readonly="readonly" :role="true" :typeId="typeId" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="抄送：">
            <approverRoleCc :approverList="ruleForm.roleCcList" :readonly="readonly" :isCc="true" :role="true" @handleChooseapprover="handleChooseapproverRoleCc"></approverRoleCc>
            <approverUserCc :approverList="ruleForm.userCcList" :readonly="readonly" :isCc="true" @handleChooseapprover="handleChooseapproverUserCc"></approverUserCc>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="任务日期：">
            <el-date-picker
              v-model="ruleForm.taskDate"
              type="daterange"
              align="right"
              unlink-panels
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="预计开始时间"
              end-placeholder="预计完成时间"
              :picker-options="pickerOptions"
              @change="selectDate"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注：">
            <el-input
              type="textarea"
              show-word-limit
              :maxlength="150"
              rows="4"
              class="input-item"
              v-model="ruleForm.remarks"
              placeholder="输入投标注意事项，支持150个字符"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item style="padding: 20px 0">
            <el-button @click="onCancel(false)">取消</el-button>
            <el-button type="primary" @click="submitForm()">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
import { mapGetters } from 'vuex';
import approver1 from './components/approver1';
import approverRoleCc from './components/approverRoleCc';
import approverUserCc from './components/approverUserCc';
// import approver2 from './components/approver2';
export default {
  name: 'TasksAdd',
  props: {
    typeId: {
      default: undefined
    },
    businessType: {
      default: undefined
    },
    projectUserDtoList: {
      default: undefined
    },
    projectPlanDtoList: {
      default: undefined
    },
    tasksId: {
      default: undefined
    },
    taskTemplateId: {
      default: undefined
    },
    detailInfo: {
      default: undefined
    }
  },
  filters: {
    approverFilter (val) {
      const data = {
        0: '一',
        1: '二',
        2: '三',
        3: '四',
        4: '五',
        5: '六',
        6: '七',
        7: '八',
        8: '九',
        9: '十',
        10: '十一',
        11: '十二',
        12: '十三',
        13: '十四',
        14: '十五',
        15: '十六',
        16: '十七',
        17: '十八',
        18: '十九',
        19: '二十',
        20: '二十一',
        21: '二十二',
        22: '二十三',
        23: '二十四',
        24: '二十五',
        25: '二十六',
        26: '二十七',
        27: '二十八',
        28: '二十九',
        29: '三十'
      };
      return data[val];
    }
  },
  components: {
    approver1,
    approverRoleCc,
    approverUserCc
  },
  data () {
    return {
      // 审批流是否回显
      readonly: false,

      loading: false,
      isShowloading: false,
      disabled: false,
      processXml: undefined,
      approverDialog: false,
      flowEntrylist: [],
      situation: 1,
      ctivities: [],
      flowEntrys: '',
      activities: '',
      ruleForm: {
        task: '', // 任务名称
        planDescription: '', // 任务说明
        sealIsNo: 0, // 是否审核
        examine: 1, // 是否审核
        examineName: '否', // 是否审核name
        // planName: '', // 关联计划
        executor: [], // 执行人
        executorId: [], // 执行人ID
        startTime: '', // 开始时间
        completionTime: '', // 结束时间
        userIds: [],
        // businessFlowId: '',
        // taskDesc: '',
        taskDate: [], // 任务日期
        approver: [], // 审批流
        remarks: '' // 备注
      },

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      rules: {
        task: [{ required: true, message: '请输入', trigger: 'blur' }],
        sealIsNo: [{ required: true, message: '请选择', trigger: 'change' }],
        examine: [{ required: true, message: '请选择', trigger: 'change' }],
        // planName: [{ required: true, message: '请选择', trigger: 'change' }],
        executor: [{ required: true, message: '请选择', trigger: ['change', 'blur'] }],
        taskDate: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    };
  },
  created () {
    console.log(this.projectUserDtoList, '执行人')
    if (this.detailInfo.TaskType === 'edit') {
      this.readonly = true;
    } else if (this.detailInfo.TaskType === 'add') {
      this.readonly = false;
    }
  },
  computed: {
    ...mapGetters(['getMainContextHeight'])
  },
  mounted () {
    console.log('this.detailInfo   点击任务编辑触发', this.detailInfo);
    if (this.detailInfo) {
      // this.ruleForm = this.detailInfo;
      this.ruleForm = Object.assign({}, this.detailInfo, {
        task: this.detailInfo?.taskName,
        executor: this.detailInfo?.mu?.map(item => item.userId)
      });
      console.log('this.ruleForm   点击任务编辑触发', this.ruleForm);
      if (!this.ruleForm.approver) {
        this.ruleForm.approver = []
      }
    }
  },
  methods: {
    // 审批人选择
    handleChooseapprover (approver) {
      this.ruleForm.approver = approver
    },
    // 抄送角色选择
    handleChooseapproverRoleCc (approver) {
      this.ruleForm.roleCcList = approver
      console.log('抄送角色选择', this.ruleForm.roleCcList);
    },
    // 抄送人选择
    handleChooseapproverUserCc (approver) {
      this.ruleForm.userCcList = approver
      console.log('抄送人员选择', this.ruleForm.userCcList);
    },
    // 选择是否审核
    selectExamine (data) {
      console.log('选择是否审核', data);
      this.ruleForm.examineName = data ? '是' : '否';
      //   this.$nextTick(() => {
      //     this.ruleForm.executorName = this.$refs.selectExecutor.selected.label;
      //   })
    },
    // 选择执行人
    selectExecutor (val) {
      console.log(val, '333333333')
      // this.$nextTick(() => {
      //   this.ruleForm.executor = this.$refs.selectExecutor.selected.map(item => item.label)
      //   console.log(this.$refs.selectExecutor.selected, '选择执行人1')
      //   this.ruleForm.executorId = this.$refs.selectExecutor.selected.map(item => item.value)
      //   // this.ruleForm.executor = this.$refs.selectExecutor.selected.map(item => item.label).toString();
      // })
    },
    // 选择时间
    selectDate (data) {
      if (data) {
        this.ruleForm.startTime = data[0];
        this.ruleForm.completionTime = data[1];
      } else {
        this.ruleForm.startTime = '';
        this.ruleForm.completionTime = '';
      }
    },
    /**
     * 项目任务详情
     */
    loadDetailWidgetData () {
      let params = {
        id: this.tasksId
      };
      return new Promise((resolve, reject) => {
        Administration.taskview(this, params).then(res => {
          this.ruleForm = res.data
          this.ruleForm.taskId = this.detailInfo.taskId
          this.processXml = res.data.bpmnXml
          setTimeout(() => {
            this.$nextTick(() => {
              // this.$refs.ProcessViewers.processReZoom()
            });
          }, 500)
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 提交表单
     */
    submitForm () {
      console.log('确定', this.ruleForm);
      this.$refs['ruleForm'].validate((valid) => {
        console.log('校验', valid);
        if (valid) {
          this.isShowloading = true;
          // localStorage.setItem('TasksAddData', JSON.stringify(this.ruleForm))
          this.onCancel(true);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onCancel (isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess, this.ruleForm);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
h4 {
  margin-bottom: 0;
}
.table_container {
  margin: 10px 0;
}
/* .form-single-info {
  display: flex;
  justify-content: center;

} */
.el-form-info {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
}
.el-form-info strong {
  margin: 0 10px;
}
</style>
